import styled from 'styled-components'


const LessionDiv = styled.div`
    padding:0 0.08rem;
    background-color:#f1f4f8;
    ul{
        padding-top:0.18rem;
        display:flex;
        flex-wrap:wrap;
        li{
            width:50%;
            padding:0 0.2rem;
            margin-bottom:0.25rem;
            .ClassBox{
                height:2rem;
                box-shadow: 0 0.1rem 0.1rem 0 #eaecef;
                display:flex;
                p{
                    width: 20px;  
                    line-height: 24px;  
                    font-size: 20px;
                    color:#4c4c4c;
                    font-size:0.26rem;
                    padding-top:0.24rem;
                    margin-left:0.18rem;
                    >span{
                        display:inline-block;
                        padding-top:0.16rem;
                        color:#4c4c4c;
                        font-size:0.16rem;
                    }
                }
                .edit{
                    display:inline-block;
                    width: 20px;  
                    line-height: 24px;  
                    font-size: 16px;
                    color:#4c4c4c;
                    margin-left:0.62rem;
                    padding-top:1rem;
                }
            }
        }
        li:first-child div{
            background:url( '${ ({ bg })=>bg[0] }' );
            background-size:100% 100%;
            background-repeat:no-repeat;
        }
        li:nth-child(2) div{
            background:url( '${ ({ bg })=>bg[1] }' );
            background-size:100% 100%;
            background-repeat:no-repeat;
        }
        li:nth-child(3) div{
            background:url( '${ ({ bg })=>bg[2] }' );
            background-size:100% 100%;
            background-repeat:no-repeat;
        }
        li:last-child div{
            background:url( '${ ({ bg })=>bg[3] }' );
            background-size:100% 100%;
            background-repeat:no-repeat;
        }
    }
    
`

export {
    LessionDiv
}